<template>
    <div class="wrap" >
          <wxc-minibar class="border-bottom" title="消息中心"   >
         </wxc-minibar>
            <wxc-tab-page ref="wxc-tab-page" :tab-titles="tabTitles" title-type="text" :tab-styles="tabStyles" :tab-page-height="tabPageHeight" @wxcTabPageCurrentTabSelected="wxcTabPageCurrentTabSelected">
             <list v-for="(v,index) in tabList" :key="index" class="item-container" :style="{ height: (tabPageHeight - tabStyles.height) + 'px' }">
                
                <refresh @refresh="onrefresh" class="refresh" :display="refreshing ? 'show' : 'hide'">
                    <rotate></rotate>
                    <!-- <text style="font-size:28px;">数据加载中。。。</text>
                    <loading-indicator class="indicator"></loading-indicator> -->
                </refresh>
                <cell v-for="(item,key) in v" v-if="v&&v.length>0" class="cell" :key="key">
                        
                      <div class="msglist-wrap" >
                          <div class="list"  @click="hrefNewPage(item,item.relationLink)"  @longpress="showDelete(item)" >
                            <div class="list-left">
                                <image :src=" item.pic || 'http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/companyPic.png' " class="icon"></image>
                            </div>
                            <div class="list-right">
                                <div class="list-txtLeft">
                                    <text class="title-txt">{{item.title}}</text>
                                    <text class="subtitle-txt graytxt">{{item.desc}}</text>
                                </div>
                                <div class="list-txtright">
                                    <text class="time-txt graytxt">{{item.createTime |filtertime}}</text>
                                </div>
                            </div>     
                        </div>
                        <!-- <div class="list"  @longpress="hrefNewPage(item.relationLink)"   @touchstart="ontouchstart($event,item)" @touchmove="ontouchmove($event,item)" @touchend="ontouchend($event,item,key)">
                            <div class="list-left">
                                <image :src=" item.pic || 'http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/nobatrecord.png' " class="icon"></image>
                            </div>
                            <div class="list-right">
                                <div class="list-txtLeft">
                                    <text class="title-txt">{{item.title}}</text>
                                    <text class="subtitle-txt graytxt">{{item.desc}}</text>
                                </div>
                                <div class="list-txtright">
                                    <text class="time-txt graytxt">{{item.createTime |filtertime}}</text>
                                </div>
                            </div>
                           
                        </div> -->
                         <div class="delete" v-if="item.flag" @click="deleteFn(item,item.no,key)">
                                <text style="font-size:28px;color:#FFFFFF;">删除</text>
                        </div>
                      </div>
                </cell>
                <cell v-if="norecord" class="norecord">
                    <image style="width:298.5px;height:298.5px;" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/nobatrecord.png"></image>
                    <text style="margin-top:71.7px;font-size: 40px;color: #9E8383;">{{norecordinfo}}</text>
                </cell> 
                 <loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'" v-if="!notLoding">
                     <rotate></rotate>
                    <!-- <loading-indicator class="indicator"></loading-indicator> -->
                </loading>
             </list>
         </wxc-tab-page>
          <loading-big v-if="loadingshow"></loading-big>
         <!-- <wxc-loadingsp :show="loadingshow" type="custom" :need-mask="true" loading-text="加载中..." m-url="http://img.alicdn.com/tfs/TB1Ep_9NVXXXXb8XVXXXXXXXXXX-74-74.gif" m-width="200" m-height="200" m-backgroundcolor="#212021" m-textcolor="#ffffff">
    </wxc-loadingsp> -->
           
    </div>
</template>

<script>
import {
    WxcTabPage,
    Utils
    
} from "weex-ui";
const modal = weex.requireModule("modal");
import WxcMinibar from "@/components/modules/wxc-minibar/index.js"
import Config from "@/tab-bar/topconfig";
import WxcLoadingsp from "@/components/modules/loading";
import rotate from "@/components/modules/rotate";
import loadingBig from "@/components/modules/loading-big";

import {
    serialize,
    getBaseUrl
} from "@/utils/index.js";
import {
    GetResponsesToken
} from "@/api.js";
let navigator = weex.requireModule("navigator");
const storage = weex.requireModule("storage");
export default {
       components: {
           WxcMinibar,
           WxcTabPage,
           WxcLoadingsp,
           rotate,
           loadingBig
           },
      data(){
          return{
            tabTitles:[{
                title:'系统公告',
                type:1
            },{
                title:'我的消息',
                type:0
            }],
            tabPageHeight: 1334,
            tabStyles:{
                   bgColor: '#FFFFFF',
                    titleColor: '#A7A7A7',
                    activeTitleColor: '#E70D0D',
                    activeBgColor: '#FFFFFF',
                    isActiveTitleBold: true,
                    iconWidth: 70,
                    iconHeight: 70,
                    width: 375,
                    height: 95,
                    fontSize: 30,
                    hasActiveBottom: true,
                    activeBottomColor: '#E70D0D',
                    activeBottomHeight: 6,
                    activeBottomWidth: 60,
                    textPaddingLeft: 10,
                    textPaddingRight: 10
            },
            tabList: [],
            loadingshow: false,
            refreshing: false,
            loadinging: false,
            notLoding:false,
            norecord: false,
            pagesize: 20, // 一页显示多少条
            pageindex: 1, //当前页
            baseURL: "",
            index:0,
            norecordinfo: "",
            distance:'',
            localArr:[],//记录上次删除的数据
            tabTagIndex:[1,0],//用来存后台给的标签号
            tabFlag:1
          }
      },
      created(){
         this.baseURL = getBaseUrl(weex.config.bundleUrl, true);
        this.tabPageHeight = Utils.env.getPageHeight()   ;

         //请求后台拿到数据
        storage.getItem('localArr',event=>{
            if(event.result=="success" && event.data){
                
                this.localArr=[...JSON.parse(event.data)];
            }
         }
      )},
      mounted(){

         this.getresposnedata(true);
      },
       filters:{
       filtertime: function (dateTimeStamp) {
           let result;
           var minute = 1000 * 60;
            var hour = minute * 60;
            var day = hour * 24;
            var halfamonth = day * 15;
            var month = day * 30;
            var now = new Date().getTime();
            var diffValue = now - dateTimeStamp;
            if(diffValue < 0){return;}
            var monthC =diffValue/month;
            var weekC =diffValue/(7*day);
            var dayC =diffValue/day;
            var hourC =diffValue/hour;
            var minC =diffValue/minute;
            if(monthC>=1){
                result="" + parseInt(monthC) + "月前";
            }
            else if(weekC>=1){
                result="" + parseInt(weekC) + "周前";
            }
            else if(dayC>=1){
                result=""+ parseInt(dayC) +"天前";
            }
            else if(hourC>=1){
                result=""+ parseInt(hourC) +"小时前";
            }
            else if(minC>=1){
                result=""+ parseInt(minC) +"分钟前";
            }else
            result="刚刚";
            return result;

        }
    },

       methods:{
        showDelete(item){
           
             this.$set(item, 'flag', true);
        },
        ontouchstart(e,item) {
            item.startX= e.changedTouches[0].pageX;
        },
        ontouchmove(e,item) {
            item.endX = e.changedTouches[0].pageX;
        },
        ontouchend(e, item, index) {
            item.distance = item.endX - item.startX;
            this.$set(item, 'flag', item.distance < 0);
            e.preventDefault();
        },
        deleteFn(item,id,index) {
            modal.confirm({
                message: '确定删除吗？',
                duration: 0.3,
                okTitle:'确定',
                cancelTitle:'取消'
            },(value)=>{
                value === '确定' && this.deleteMessage(id,index);
                 value === '取消'&&   this.$set(item, 'flag', false);
            })
        },
       deleteMessage(itemid,index1) {
           this.localArr.push({id:itemid});
           let stringArr=JSON.stringify( this.localArr);
           console.log( this.localArr);
            storage.setItem('localArr',stringArr);
            this.tabList[this.index].splice(index1, 1);
        },
        //过滤上次删除的数据,找出相同的项
        filterLocalArr(arr){
            //我把B数组的ID全部取出来
            let localArrIds = [];
            this.localArr.forEach(item => {
                localArrIds.push(item.id);
            });
            //A数组遍历，如果每一个元素的ID不包含在localArrIds中，说明是不重复的，我就放在resultList里面返回
            let resultList = [];
            arr.forEach(obj => {
                if(!localArrIds.includes(obj.no)){
                resultList.push(obj);
                }
            });
            return resultList;
    },

        //点击使用到首页
        goDetail(){
              navigator.push({
                url: this.baseURL + "views/couponlist/coupinlist.js",
                animated: "true"
            });
        },
        
        //请求消息列表页数据
          async getresposnedata(state) {
            this.loadingshow = true
            this.refreshing = true
            let param = {
                size: this.pagesize,//分页大小，一页展示多少条
                current: this.pageindex,//当前页面
                type: this.tabFlag//类型
                
            };

            try {
                 let res = await GetResponsesToken('account/v1/announcements', param);//发请求
                 let iarr = ["暂无公告", "暂无消息"];
                this.loadingshow = false;
                if (this.pageindex !== 1) this.norecord = false;
            
                 let demoList;
                //在这里过滤数据
                if(this.localArr.length>0){
                     demoList=this.filterLocalArr(res);
                    
                }else{
                    demoList=res;
                   
                   
                   
                }
              
                 if (demoList.length === 0) {
                    this.norecord = true;
                    this.norecordinfo = iarr[+this.index];
                } else {
                    this.norecord = false;
                }
                // let key=demoList;
                let key = !!state ? demoList : !Array.isArray(this.tabList[this.index]) ? [] :this.tabList[this.index].concat(demoList);
         
                this.$set(this.tabList, this.index, key);
                this.refreshing = false
                this.loadinging = false
                this.notLoding = demoList.length < this.pagesize 

            } catch (e) {
                this.loadingshow = false
            }
        },
           wxcTabPageCurrentTabSelected(e) {
            this.index = e.page;
            this.pageindex = 1;
            this.tabFlag=this.tabTagIndex[e.page];
            this.getresposnedata(true);
   
         
           
        },
        onrefresh(event) {
            this.pageindex = 1
            this.getresposnedata(true)
        },
        onloading(event) {
            if( !!this.notLoding) return 
            this.loadinging = true
            this.pageindex++
            this.getresposnedata()
        },
        hrefNewPage(item,url){
                
                  this.$set(item, 'flag', false);
                let baseurl =  getBaseUrl(weex.config.bundleUrl, true);
                let urlParmas = {
                url: url
                }
                 let jUrl = baseurl + `views/webview/conview_webview.js?` + serialize(urlParmas);
                let params = {
                url: jUrl,
                animated: "true"
                };
                navigator.push(params);
                return;
        
           
        }
    },

}
</script>

<style scoped>
.item-container {
    width: 750px;
}
    .wrap{
        background-color: #F5F5F5;
    }   
    .refresh {
    width: 750px;
    display: flex;
    align-items: center;
}
.loading{
    width: 750px;
    display: flex;
    align-items: center;
   
}
    .norecord {
        padding-top: 158px;
        padding-left: 225.8px;
        padding-right: 225.8px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .msglist-wrap{
         background-color: #fff;
         flex-direction: row;
         width:750px;
    }
    .list{
        flex-direction: row;
        height:160px;
        flex:4;
    }
    .list-left{
        width:150px;
        align-items: center;
        justify-content: center;
    }
    .list-right{
        border-bottom-width: 1px;
        border-bottom-color: gainsboro;
        border-bottom-style: solid;
        flex-direction: row;
        width:600px;
       
        
    }
    .list-txtright{
        width:180px;
        padding-top:40px;
         padding-right:32px;
    }
    .time-txt{
          text-align: right;
    }
    .list-txtLeft{
        width:420px;
    }
    .icon{
        width:88px;
        height:88px;
         border-top-left-radius: 50%;
        border-top-right-radius: 50%;
        border-bottom-left-radius: 50%;
        border-bottom-right-radius: 50%;
        text-align: center;
    }
    .title-txt{
        font-size:28px;
        color:#333333;
        padding-top:36px;
        lines:1;
    }
    .graytxt{
        color:#999999;
        font-size:24px;
    }
    .subtitle-txt{
        padding-top:16px;
        height:45px;
      
    }

    .delete{
       width:160px;
       height:160px;
       display:flex;
       flex-direction: row;
       align-items: center;
       justify-content: center;
       background-color:#E70D0D;
   }
</style>